<template>
  <div>
    <div class="yinying"></div>
    <header>
      <span class="back" @click="back">
        <svg
          t="1631347254050"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2146"
          width="200"
          height="200"
        >
          <path
            d="M540.525714 1000.594286a40.448 40.448 0 0 1-57.051428 0L38.4 555.812571a40.448 40.448 0 0 1-0.950857-56.246857L482.523429 24.356571a40.448 40.448 0 1 1 58.953142 55.296L123.318857 526.189714 540.525714 943.542857a40.448 40.448 0 0 1 0 57.197714z"
            p-id="2147"
          ></path>
        </svg>
      </span>
      <span>{{ $route.query.city }}</span>
      <span class="qie" @click="back">切换城市</span>
    </header>
    <form>
      <input
        type="text"
        placeholder="输入学校、商务楼、地址"
        required
        v-model="zhi"
        @input="detect"
        @focus="detectfoc"
        @blur="detectblur"
        @keydown.38="shang"
        @keydown.40="xia"
      />

      <button v-on:click.prevent="submit">提交</button>
    </form>
    <nav>搜索历史</nav>
    <ul id="ulA" v-if="buling == true">
      <li v-for="(i, item) in arr" :key="item" :class="{ bianse: item == ii }">
        {{ i }}
      </li>
    </ul>
    <ul v-if="appear == true" class="ulB">
      <li v-for="(i, item) in arrxin" :key="item">
        <p>
          <span class="s1" @click="goOutShop(item)">{{ i.name }}</span>
          <span class="s2">{{ i.address }}</span>
        </p>
      </li>
    </ul>
    <ul v-if="appear == false" class="ulB">
      <li v-for="(i, item) in this.$store.state.putaway" :key="item">
        <p>
          <span class="s1" @click="goOut(item)">{{ i.name }}</span>
          <span class="s2">{{ i.add }}</span>
          <button class="danshan" @click="deleteOne(item)">
            <svg
              t="1631347336648"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3431"
              width="200"
              height="200"
            >
              <path
                d="M961.9968 124.8768h-280.9344V0H306.5344v124.8768H25.6v62.4128h71.7824V1008.128h811.52V187.2896h53.0944v-62.464zM846.4896 942.592H159.7952V193.536h686.6944v749.056zM368.9472 62.4128h249.7024v62.464H368.9472v-62.464z"
                fill="#9B9B9B"
                p-id="3432"
              ></path>
              <path
                d="M462.592 378.4704h62.4128v397.9264h-62.464V378.4704z m187.2896-66.3552h62.4128v499.4048h-62.464V312.1152z m-374.5792 0h62.464v499.4048h-62.464V312.1152z"
                fill="#9B9B9B"
                p-id="3433"
              ></path>
            </svg>
          </button>
        </p>
      </li>
      <span
        @click="deleteAll"
        v-if="this.$store.state.putaway.length"
        class="qingchu1"
      >
        清空所有</span
      >
    </ul>
  </div>
</template>
<script>
import { searchCity } from "../../API/index.js";
export default {
  data() {
    return {
      zhi: "",
      arrxin: [],
      appear: false,
      buling: false,
      arr: [],
      ii: "",
    };
  },
  methods: {
    async submit() {
      if (this.zhi) {
        var suibian = await searchCity(this.$route.query.id, this.zhi);
        if (suibian.data) {
          this.arrxin = suibian.data;
        }
        this.$store.commit("setM", this.zhi);
        this.appear = true;
        if (this.arr.indexOf(this.zhi) == -1) {
          // 输入重复不录入
          this.arr.push(this.zhi);
        }
      }
    },
    back() {
      this.$router.push("/Cityposition");
    },
    detect() {
      if (!this.zhi) {
        this.appear = false;
        this.arrxin = "";
        this.buling = false;
      }
    },
    detectfoc() {
      this.buling = true;
    },
    detectblur() {
      this.buling = false;
    },
    shang() {
      this.ii--;
      this.zhi = this.arr[this.ii];
    },
    xia() {
      this.ii++;
      this.zhi = this.arr[this.ii];
    },
    goOutShop(item) {
      this.$store.commit("setN", {
        add: this.arrxin[item].address,
        name: this.arrxin[item].name,
      });
      this.$router.push({
        path: "/Outshop",
        query: {
          name: this.arrxin[item].address,
          lati: this.arrxin[item].lati,
          long: this.arrxin[item].long,
        },
      });
      console.log(this.arrxin);
    },
    deleteOne(item) {
      this.$store.commit("setS", item);
    },
    deleteAll() {
      this.$store.commit("setK");
    },
    goOut(item) {
      this.$router.push({
        path: "/Outshop",
        query: { name: this.$store.state.putaway[item].add },
      });
    },
  },
};
</script>
<style scoped>
.ulB li {
  height: 4rem;
  border-bottom: 1px solid #ccc;
  padding-left: 1rem;
  padding-top: 0.5rem;
}
.yinying {
  position: fixed;
  height: 1rem;
  background: #f5f5f5;
  width: 100%;
  top: 3rem;
  left: 0rem;
}
button svg {
  width: 1rem;
  height: 1rem;
}
.ulB button {
  background: transparent !important;
}
nav {
  width: 100%;
  height: 1.5rem;
  line-height: 1.5rem;
  background-color: #f5f5f5;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  padding-left: 0.5rem;
  color: #333;
  font-size: 0.5rem;
}
header svg {
  width: 1rem;
  height: 1rem;
}
.qingchu1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 100%;
  color: #666;
}
span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.danshan {
  width: 2.5rem;
  outline: none;
  border: none;
  position: absolute;
  right: 0;
}

.ulB {
  position: fixed;
  width: 100%;
  top: 12rem;
}
.bianse {
  background: red;
}
#ulA {
  overflow: hidden;
  position: fixed;
  top: 5rem;
  width: 100%;
}
#ulA li {
  height: 2rem;
}
body {
  background: #f5f5f5;
}
form {
  margin-top: 3.95rem;
  background-color: #fff;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  padding-top: 0.5rem;
  height: 6rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}
form button {
  background-color: #3190e8;
  color: #fff;
  border-radius: 0.1rem;
  margin-bottom: 0.4rem;
  width: 100%;
  height: 2rem;
  outline: none;
  border: none;
  width: 90%;
  font-size: 1rem;
}
form input {
  outline: none;
  padding-left: 1rem;
  border: 1px solid #e4e4e4;
  font-size: 1rem;
  color: #333;
  text-decoration: none;
  height: 40%;
  width: 90%;
  color: #333;
  box-sizing: border-box;
}
header {
  background-color: #3190e8;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3rem;
  line-height: 2.95rem;
}
header span:nth-last-of-type(2) {
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
.sp1 {
  left: 0.4rem;
  font-weight: 400;
  font-size: 0.7rem;
  color: #fff;
  width: 2.3rem;
  height: 0.7rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

header span {
  font-size: 0.8rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
}

ul span {
  display: block;
}
ul p {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  justify-content: space-between;
}
.s2 {
  font-size: 0.72rem;
  color: #999;
}
.s1 {
  color: #333;
}
</style>
